<template>
<a-drawer placement="right" class="wd-drawer" :destroyOnClose="true" @close="closeFun" :maskClosable="false" :width="modelData.width+'px'" :getContainer="getContainer" :closable="true" v-model:visible="modelData.show"  v-bind="modelData.options">
  <template #title>
    <slot v-if="modelData.titleTemplate" :name="modelData.titleTemplate"></slot>
    <span class="wd-drawer-title" v-else>{{modelData.title}}</span>
  </template>
  <slot name="closeIcon"></slot>
  <a-layout class="wd-drawer-content whov">
    <a-layout-content>
      <a-spin :spinning="modelData.loading||false" tip='数据加载中...' size='large'>
        <slot></slot>
      </a-spin>
    </a-layout-content>
    <a-layout-footer class="wd-drawer-bottom" v-if="modelData.buttonList.length>0">
      <template v-for="(item,index) in modelData.buttonList">
        <i-button :buttonData="changeButtonData(item)" :data='item' class="wd-drawer-bottom-btn"  @buttonclick="(data)=>{buttonClick(item,data)}" :key="index" v-if="!item.template&&item.isShow===true"></i-button>
        <slot v-else-if="item.isShow!=false" :name="item.template"></slot>
      </template>
    </a-layout-footer>
  </a-layout>
</a-drawer>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, PropType, computed } from 'vue'
import { DrawerIntreFace } from './IDrawerInterFace'
// import { Drawer, Spin, Layout } from 'ant-design-vue'
import IButton from '../../IButton/src/IButton.vue'
import { ButtonOptionsInterFace } from '../../IDialog/src/IDialogInterFace'
export default defineComponent({
  name: 'wd-drawer',
  props: {
    drawerData: {
      type: Object as PropType < DrawerIntreFace >,
      required: true
    }
  },
  setup (props, ctx) {
    const closeFun = () => {
      ctx.emit('cancel')
    }
    const modelData = computed((): DrawerIntreFace => {
      return props.drawerData
    })
    // 配置button组件Fun属性
    const appCtx = getCurrentInstance()
    const getContainer = () => appCtx && appCtx.appContext.app._container
    return {
      closeFun,
      modelData,
      getContainer
    }
  },
  methods: {
    // 点击操作执行方法
    buttonClick (buttonData: ButtonOptionsInterFace, data: any) {
      this.handChange(buttonData.buttonFun, data)
    },
    // 整体回调方法
    handChange (fun: string, val: any) { // 按钮方法总返回
      if (fun) {
        this.$emit(fun, val)
      }
    },
    // 配置button组件Fun属性
    changeButtonData (item: ButtonOptionsInterFace) {
      item.Fun = 'buttonclick'
      return item
    }
  },
  components: {
    IButton
    // 'a-drawer': Drawer,
    // 'a-spin': Spin,
    // 'a-layout': Layout,
    // 'a-layout-content': Layout.Content,
    // 'a-layout-footer': Layout.Footer
  }
})
</script>
